import { Button, Form, Input, message } from "antd";
import {
	UserOutlined,
	LockOutlined,
	CloseCircleOutlined,
} from "@ant-design/icons";
import { useNavigate } from "react-router-dom";
import { UserForm } from "@/types/user";
import { useDispatch } from "react-redux";
import { loginAsync } from "@/store/modules/user.store";

import { Dispatch } from "@reduxjs/toolkit";



export default function LoginForm() {
	const navigate = useNavigate();
    // 获取dispatch
    const dispatch = useDispatch<Dispatch<any>>();
    
	const onFinish = (values: UserForm): any => {
        dispatch(loginAsync(values))
		navigate("/");
        message.success('登录成功') 
	};
	const onFinishFailed = () => {
		console.log("点击onFinishFailed");
	};

	interface FieldType {
		username?: string;
		password?: string;
	}

	return (
		<Form
			name="basic"
			onFinish={onFinish}
			onFinishFailed={onFinishFailed}
			size="large"
			autoComplete="off"
		>
			<Form.Item<FieldType>
				name="username"
				rules={[{ required: true, message: "请填写你的用户名!" }]}
			>
				<Input
					placeholder="用户名：admin / user"
					prefix={<UserOutlined />}
				/>
			</Form.Item>

			<Form.Item<FieldType>
				name="password"
				rules={[{ required: true, message: "请填写你的密码！" }]}
			>
				<Input.Password
					autoComplete="new-password"
					placeholder="密码：123456"
					prefix={<LockOutlined />}
				/>
			</Form.Item>

			<Form.Item className="login-btn">
				<Button icon={<CloseCircleOutlined />}>重置</Button>

				<Button
					type="primary"
					htmlType="submit"
					icon={<LockOutlined />}
				>
					登录
				</Button>
			</Form.Item>
		</Form>
	);
}
